@font-face {
	font-family: 'Conv_8bitoperator';
	src: url('../fonts/8bitoperator.eot');
	src: local('☺'), url('../fonts/8bitoperator.woff') format('woff'), url('../fonts/8bitoperator.ttf') format('truetype'), url('../fonts/8bitoperator.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ==========================================================================
   Default styles
   ========================================================================== */
html,
button,
input,
select,
textarea {color: #222;}

html{min-width: 926px;}

div:after,
ol:after,
form:after,
ul:after, 
dl:after,
section:after,
button:after{content:".";display:block;clear:both;visibility:hidden;height:0;overflow:hidden;} 

body {font-size: 1em; line-height: 1.4; font-size: 16px; color: white;  font-family: 'Conv_8bitoperator', Arial, serif; position: relative;}

::-moz-selection {background: #b3d4fc; text-shadow: none;}

::selection {background: #b3d4fc; text-shadow: none;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

h1{font-size: 3em; margin: 0px 0px 41px 0px; text-shadow: 5px -5px 1px #013143; filter: dropshadow(color=#013143, offx=5, offy=-5);}

p{font-size: 0.7em; margin-bottom: 12px;}

dl,
menu,
ol,
ul {padding: 0px; margin: 0; list-style: none;}


input[type="submit"], 
button {cursor: pointer; padding: 0; border: none; background-color: transparent;}

img {vertical-align: middle;}

fieldset {border: 0; margin: 0; padding: 0;}

textarea {resize: vertical;}

ul{-webkit-margin-after: 0; -webkit-margin-after: 0; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0;}

.chromeframe {margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}

a{color: white; text-decoration: none; cursor: auto;}

.clients-sprite span,
button span,
a span,
h1 span{top:-500px; position: relative; display: block;}

section{z-index: 3; position: relative; padding-top: 150px; margin-bottom: -150px;}

/* ==========================================================================
   Trixter custom styles
   ========================================================================== */
.full-width{width: 100%;}

.default-width-and-center{left: 50%; width: 920px; position: relative; margin-left: -460px;}

.minimal-width-and-center-in-right{width: 412px; position: relative; left: 50%; margin-left: 48px}

.section-container{display: block; position: relative;}

#top{height: 3860px; background: url('../img/bg/bg-top.png');}

#banner{overflow: auto}
#banner{padding-top: 200px;}
#banner ul{width: 871px; height: 453px; overflow: hidden; margin-left: 20px;}

#banner button{position: absolute; top: 466px; z-index: 20;}
#banner button#toLeftBanner{left: 0px}
#banner button#toRightBanner{right: 0px}

#about-us{height: 848px; margin-top: 120px;}

#services{height: 598px;}

#clients ul{width: 675px; position: relative; left: 50%; margin-left: -215px;}
#clients li{float: left; margin: 0px 0px 0px 80px;}

#middle{background: #300047; min-height: 762px;}
#middle.section-container:before{background-position: 0px -530px;}

#cases h1{text-align: center;}
#cases h2{font-size: 1.2em; text-align: center; width: 100%; position: absolute; bottom: 23px;}
#cases > ul > li{margin-bottom: -42px;}
.thumb-in-left{left: 50%; margin-left: -455px;}
.thumb-in-ringht{left: 50%; margin-left: 187px;}
.thumb-container{position: relative; width: 276px; height: 269px; cursor: pointer;}
.thumb-container:hover h2{color: #b3d4fc;}
#cases div.sprite{display: none; position: absolute;}
#cases div.selected{z-index: 10;}
.boxPortrait{left: 50%; top: 50%; margin: -381px 0px 0px -225px;}
#cases div.sprite ul{margin: 21px 0px 0px 21px;}
figure dfn{font-size: 0.9em; color: #fca800; margin: 21px 0px 0px 21px; display: block;}
figure dl{font-size: 0.8em; color: white; margin: 0px 0px 0px 21px; font-family: Verdana, Arial, sans-serif}
figure dl *{display: inline; margin: 0;}
figure dd:after{display: block; content: '';}
.boxPortrait figure ul{min-height: 553px;}

#bottom{height: 3047px; background: url('../img/bg/bg-bottom.png');}

#contact{font-size: 0.7em;}
#contact h1{margin-bottom: -16px;}
#contact p{ font-size: 1em;}
#contact input[type='text'],
textArea{color: black; width: 232px; height: 18px; border: none; padding: 0; margin: 0; display: inline; float: left; margin-bottom: 17px;}
textArea{height: 124px; max-height: 124px; min-height: 124px;}
label{width: 125px; height: 18px; display: block; text-align: right; float: left; padding-right: 20px; margin-bottom: 17px;}
aside{margin: 74px 0px 37px 36px;}
input[type='submit']{width: 59px; height: 19px; background-color: #ff9700; border: 4px solid #ffab32; padding-bottom: 14px; color: black; font-size: 1em; font-weight: bold; position: absolute; right: 34px; bottom: 30px;}
input[type='submit']:hover{color: white;}

#no-canvas{content: ''; width: 100%; height: 100%; top:0px; left: 0px; position: absolute; background: url('../img/bg/no-canvas.png') center top no-repeat; z-index: 1;}
#no-canvas span{display: none;}

#back-animation{position: fixed; top: 0px; z-index: 1; height: 100%; width: 100%;}

header{z-index: 30; top: -40px; height: 130px; position: fixed !important; background: black; border-radius: 5px; border: 3px solid #b5b5b5;}
header nav{width: 100%; height: 100%;}
header h1{margin: 48px 0px 0px 12px; float: left;}
header ul{width: 650px; height: 100%; float: right;}
header li{margin: 0 0 0 36px; height: 100%; float: left; text-align: center; padding: 95px 0px 0px 0px;}
header a:hover{color: #8dd7f7;}

/*  =========================================================================
    Sprietes.
    ========================================================================= */
#btnAbout:after,
#btnCases:after,
#btnClients:after,
#btnContact:after,
#btnServices:after,
.sprite{display:block; overflow:hidden; background-repeat: no-repeat;background-image:url(../img/sprite/main-assets2.png);}
 
.boxContact{width:410px; height:449px; background-position: -451px -30px;}
#facebook{width:33px; height:34px; background-position: -211px -45px; position: absolute; bottom: 20px; left: 20px;}

.boxPortrait{width:451px; height:762px; background-position: -0px -262px;}
.boxLandscape{width:853px; height:545px; background-position: -451px -479px;}
.btnX{width:14px; height:16px; background-position: -86px -134px; float: left;}
.btnX:hover{background-position: -346px -245px;}
.toLeft{width:11px; height:18px; background-position: -115px -133px; float: right;}
.toRight{width:11px; height:18px; background-position: -102px -133px; float: right; margin: 0px 21px 0px 10px;}
.toLeft:hover{background-position: -375px -244px;}
.toRight:hover{background-position: -362px -244px;}

#btnAbout:after,
#btnCases:after,
#btnClients:after,
#btnContact:after,
#btnServices:after{position: relative; left: 50%; margin-top: -72px;}
#btnAbout:after{width:36px; height:44px; background-position: -209px -0px; content: ''; margin-left: -15px;}
#btnCases:after{width:50px; height:45px; background-position: -202px -79px; content: ''; margin-left: -25px;}
#btnClients:after{width:40px; height:45px; background-position: -129px -79px; content: ''; margin-left: -20px;}
#btnContact:after{width:43px; height:45px; background-position: -86px -79px; content: ''; margin-left: -21px;}
#btnServices:after{width:26px; height:45px; background-position: -174px -79px; content: ''; margin-left: -13px;}
#btnAbout:hover:after,
#btnAbout.selected:after{background-position: -344px -120px;}
#btnCases:hover:after,
#btnCases.selected:after{background-position: -252px -210px;}
#btnClients:hover:after,
#btnClients.selected:after{background-position: -295px -165px;}
#btnContact:hover:after,
#btnContact.selected:after{background-position: -252px -165px;}
#btnServices:hover:after,
#btnServices.selected:after{background-position: -302px -210px;}

#trixter{width:202px; height:70px; background-position: -0px -0px; float: left;}

#toLeftBanner{width:43px; height:74px; background-position: -43px -79px;}
#toRightBanner{width:43px; height:74px; background-position: -0px -79px;}
#toRightBanner:hover{ width:43px; height:74px; background-position: -344px -165px;}
#toLeftBanner:hover{ width:43px; height:74px; background-position: -387px -165px;}

.clients-sprite{background-image:url('../img/sprite/clients-sprite2.png');}
 
#globo{ width:100px; height:100px; background-position: -121px -9px;}
#letraPonto{ width:121px; height:117px; background-position: -0px -0px;}
#popis{ width:154px; height:108px; background-position: -222px -5px;}

footer{height: 434px; width: 100%; background: url('../img/bg/sun.png') center top no-repeat; position: absolute; bottom: 0px;left: 0px;}
footer small{display: block; width: 100%; position: absolute; bottom: 10px; left: 0px; text-align: center;}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px;}

.ir:after {content: ""; display: block; width: 0; height: 150%;}

.hidden {display: none !important; visibility: hidden;}

.visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}

.invisible {visibility: hidden;}

.clearfix:after,
.clearfix:after {content: " "; display: table;}

.clearfix:after {clear: both;}

.clearfix {*zoom: 1;}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important;}

    a,
    a:visited {text-decoration: underline;}

    a[href]:after {content: " (" attr(href) ")";}

    abbr[title]:after {content: " (" attr(title) ")";}

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {content: "";}

    pre,
    blockquote {border: 1px solid #999; page-break-inside: avoid;}

    thead {display: table-header-group; /* h5bp.com/t */}

    tr,
    img {page-break-inside: avoid;}

    img {max-width: 100% !important;}

    @page {margin: 0.5cm;}

    p,
    h2,
    h3 {orphans: 3; widows: 3;}

    h2,
    h3 {page-break-after: avoid;}
}